<template>
  <div class="Index" ref='IndexRef'>
    <div class="Index-Header">
      <div class="Index-Header-Title">
        {{userInfo.school_name}}-会员卡
      </div>
      <!-- <swiper :options="swiperOption" ref="mySwiper" class="swiper" v-if="Stau">
        <swiper-slide class="swiper-slide" v-for='(item,index) in List' :key="index"> -->
      <div class="Index-Header-Box" @click="GoToMy()">
        <div class="Index-Header-Box-top">
          <div class="Index-Header-Box-top-item">
            <!-- <div class="Index-Header-Box-top-item-icon">
                  <img src="static/img/Index/bank.png" width="100%" />
                </div> -->
            <div class="Index-Header-Box-top-item-name">
              幼儿园：{{userInfo.school_name ?userInfo.school_name:'获取中'}}
            </div>
          </div>
          <div class="Index-Header-Box-top-item">
            <div class="Index-Header-Box-top-item-icon1">
              <img src="static/img/Index/owner.png" width="100%" />
            </div>
            <div class="Index-Header-Box-top-item-name2">{{userInfo.name}}</div>
          </div>
        </div>

        <div class="Index-Header-Box-Num">
          <div class="Index-Header-Box-Num-count">
            {{userInfo.type=='1'?'主要联系人':"次要联系人"}}
          </div>
        </div>
        <div class="Index-Header-Box-Num">
          <div class="Index-Header-Box-Num-count">
            当前身份：{{userInfo.identity}}
          </div>
        </div>
        <div class="Index-Header-Box-Card">
          <span class="Index-Header-Box-Card-mar">联系电话:{{userInfo.phone}}</span>
          <span class="Index-Header-Box-Card-mar2">登记子女：{{userInfo.chid_num}}名</span>
        </div>
        <!-- <div class="GoToDetail" @click="GoToDetail()">
              <img src="static/img/Index/tri.png" width="100%" v-show='activeNum<(List.length - 1)' />
            </div> -->
        <div class="Index-Logo">
          <!-- <img src="static/img/Index/bigbank.png" width="100%" /> -->
        </div>
      </div>

      <!-- </swiper-slide>
      </swiper> -->

      <!-- <div class="Index-Header-Box-Null" v-else>
        <div class="tips">
          尚未绑定银行卡
        </div>
      </div> -->

    </div>

    <div class="Index-Tabs">
      <div class="Index-Tabs-itme" v-for='(item,index) in ListItem' @click="TabsItem(index)">
        <div class="Index-Tabs-itme-icon">
          <img :src="item.ImgActive" width="100%" v-if="ItemActive==index" />
          <img :src="item.Img" width="100%" v-else />
        </div>
        <div class="Index-Tabs-itme-title">{{item.title}}</div>
      </div>
      <div class="Index-Tabs-bottom" :style="{left:ItemActive*33.33+'%'}">

      </div>
    </div>
    <!--通知-->
    <div class="Index-Body" v-if="ItemActive==0">
      <div class="Index-Body-Item" v-for='item in NoticeList' @click="GoToNotice(item.chid,item.id,item.type,item.view)">
        <div class="Index-Body-Item-Icon">
          <img src="static/img/Index/notcricle.png" width="100%" v-if='item.view ==0' />
          <img src="static/img/Index/notcricle2.png" width="100%" v-else />
        </div>
        <div class="Index-Body-Item-Message">
          <div class="Index-Body-Item-Message-Title">
            <div class="Index-Body-Item-Message-Title-Tips">
              <span>{{item.type | TypeInit}}</span>
            </div>
            <div class="Index-Body-Item-Message-Title-Time">
              {{item.publish_time}}
            </div>
          </div>
          <div class="Index-Body-Item-Message-Font">
            {{item.title}}
          </div>
          <div class="Index-Body-Item-Message-boy">
            <span>{{item.child_name}}</span>
            <span v-if="item.type==1">{{item.status==0?'未缴费':'已缴费'}}</span>
            <span v-else-if="item.type==3">{{item.status==0?'未退费':'已退费'}}</span>
          </div>
        </div>
      </div>
      <div class="MoreDiv" v-if="More[0].More">
        <i class="el-icon-loading"></i>
        <span>努力加载中</span>
      </div>
      <div class="MoreDiv" v-else>
        <div class="MoreLine"></div>
        <span class="MoreSpan">暂无更多</span>
        <div class="MoreLine"></div>
      </div>
    </div>


    <!--权益-->
    <div class="Index-Body" v-if="ItemActive==1">
      <div class="Index-Body-Item" v-for='item in RightsList' @click="GoToRights()">
        <div class="Index-Body-Item-Icon">
          <img src="static/img/Index/offer.png" width="100%" />
        </div>
        <div class="Index-Body-Item-Message">
          <div class="Index-Body-Item-Message-Title">
            <div class="Index-Body-Item-Message-Title-Tips">
              <span>本地</span>
            </div>
            <div class="Index-Body-Item-Message-Title-Time">
              2018/05/31
            </div>
          </div>
          <div class="Index-Body-Item-Message-Font">
            中2班幼儿油画课程材料缴费通知家长们赶紧赶快交钱咯
          </div>
        </div>
      </div>

      <!--暂无更多-->
      <div class="MoreDiv" v-if="More[1].More">
        <i class="el-icon-loading"></i>
        <span>努力加载中</span>
      </div>
      <div class="MoreDiv" v-else>
        <div class="MoreLine"></div>
        <span class="MoreSpan">敬请期待!</span>
        <div class="MoreLine"></div>
      </div>
    </div>

    <!--理财-->
    <div class="Index-Body" v-if="ItemActive==2">
      <div class="Index-Body-Item" v-for='item in FinancialList' @click="GoToFinancial(item.type,item.product_id,item.url)">
        <div class="Index-Body-Item-Icon">
          <img src="static/img/Index/gold.png" width="100%" />
        </div>
        <div class="Index-Body-Item-Message">
          <div class="Index-Body-Item-Message-Title">
            <div class="Index-Body-Item-Message-Title-Tips">
              <span>{{item.type==1?'存款':'保险'}}</span>
            </div>
            <div class="Index-Body-Item-Message-Title-Time">
              {{item.publish_time}}
            </div>
          </div>
          <div class="Index-Body-Item-Message-Font">
            {{item.product_name}}
          </div>
        </div>
      </div>

      <!--暂无更多-->
      <div class="MoreDiv" v-if="More[2].More">
        <i class="el-icon-loading"></i>
        <span>努力加载中</span>
      </div>
      <div class="MoreDiv" v-else>
        <div class="MoreLine"></div>
        <span class="MoreSpan">暂无更多</span>
        <div class="MoreLine"></div>
      </div>
    </div>
  </div>
</template>

<script>
  var _this = null;

  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper';
  import {
    Indicator,
    Toast
  } from 'mint-ui';
  export default {
    name: 'Index',
    data() {
      return {
        userInfo: '',
        CardNum: '1610500085152320',
        activeName: 'second',
        List: [1, 2, 3, 4],
        activeNum: 0,
        Scroll: true,
        More: [{
          'More': false,
          'page': 1
        }, {
          'More': false,
          'page': 1
        }, {
          'More': false,
          'page': 1
        }],
        NoticeList: [],
        RightsList: [],
        FinancialList: [],
        ItemActive: 0,
        Stau: true,
        ListItem: [{
          'ImgActive': 'static/img/Index/notice2.png',
          'ImgMessage': 'static/img/Index/notice1.png',
          'Img': 'static/img/Index/notice.png',
          'title': '通知'
        }, {
          'ImgActive': 'static/img/Index/rights2.png',
          'ImgMessage': 'static/img/Index/rights1.png',
          'Img': 'static/img/Index/rights.png',
          'title': '权益'
        }, {
          'ImgActive': 'static/img/Index/pig2.png',
          'ImgMessage': 'static/img/Index/pig1.png',
          'Img': 'static/img/Index/pig.png',
          'title': '儿童理财'
        }],
        swiperOption: {
          slidesPerView: 'auto',
          spaceBetween: 20,
          on: {
            slideNextTransitionStart: function () {
              _this.activeNum = this.realIndex
            },
            slidePrevTransitionStart: function () {
              _this.activeNum = this.realIndex
            },

          }
        }
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    created: function () {
      _this = this;
      console.log(sessionStorage.getItem('userInfo') == 'undefined')
      if (sessionStorage.getItem('userInfo') != null && sessionStorage.getItem('userInfo') != 'undefined') {
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
      } else {
        this.getInfo();
      }
    },
    methods: {
      // 获取【通知数据】
      GetNoticeList(P) {
        var vm = this;
        Indicator.open({
          text: '加载中...',
        });
        this.$ApiCom.Index(P).then(function (res) {
          Indicator.close();
          if (res.data.errCode == 1001) {
            Indicator.open({
              text: '登陆失效...',
            });
            localStorage.clear();
            setTimeout(() => {
              Indicator.close();
              var Sid = localStorage.getItem('Sid');
              vm.$router.push({
                path: `/Login`
              })
            }, 1000);
          } else if (res.data.errCode == 1002) {
            Indicator.open({
              text: '授权失效...',
            });
            // 加密路径，回调路径
            var IndexInfo = encodeURIComponent(window.location.href);
            // 获取sessionId
            var sessionId = sessionStorage.getItem('sessionId');
            setTimeout(() => {
              Indicator.close();
              // 授权
              location.href = 'http://xyb.wujiaping.cn/parent/login/getWxInfo?redirectUri=' + IndexInfo +
                '&&sessionId=' + sessionId;
            }, 1000);
          } else if (res.data.errCode == 0) {
            if (res.data.data.noticeList.notice.length < 1) {
              vm.More[vm.ItemActive].More = false;
              vm.Scroll = false;
            } else {
              res.data.data.noticeList.notice.forEach(element => {
                vm.NoticeList.push(element);
              });
              vm.More[vm.ItemActive].More = false;
              vm.Scroll = true;
            }
          } else {
            Indicator.open({
              text: res.errMsg,
            });
            setTimeout(() => {
              Indicator.close();
              vm.$router.push({
                path: `/Index`
              })
            }, 1000);
          }
        })
      },
      // 获取【理财数据】
      GetProduct(P) {
        var vm = this;
        Indicator.open({
          text: '加载中...',
        });
        this.$ApiCom.productList(P).then(function (res) {
          Indicator.close();
          if (res.data.errCode == 1001) {
            Indicator.open({
              text: '登陆失效...',
            });
            localStorage.clear();
            setTimeout(() => {
              Indicator.close();
              var Sid = localStorage.getItem('Sid');
              vm.$router.push({
                path: `/Login`
              })
            }, 1000);
          } else if (res.data.errCode == 1002) {
            Indicator.open({
              text: '授权失效...',
            });
            // 加密路径，回调路径
            var IndexInfo = encodeURIComponent(window.location.href);
            // 获取sessionId
            var sessionId = sessionStorage.getItem('sessionId');
            setTimeout(() => {
              Indicator.close();
              // 授权
              location.href = 'http://xyb.wujiaping.cn/parent/login/getWxInfo?redirectUri=' + IndexInfo +
                '&&sessionId=' + sessionId;
            }, 1000);
          } else if (res.data.errCode == 0) {
            if (res.data.data.list.length < 1) {
              vm.More[vm.ItemActive].More = false;
              vm.Scroll = false;
            } else {
              res.data.data.list.forEach(element => {
                vm.FinancialList.push(element);
              });
              vm.More[vm.ItemActive].More = false;
              vm.Scroll = true;
            }
            vm.More[vm.ItemActive].More = false;
          } else {
            Indicator.open({
              text: res.errMsg,
            });
            setTimeout(() => {
              Indicator.close();
              vm.$router.push({
                path: `/Index`
              })
            }, 1000);
          }
        })
      },
      //银行卡翻页
      GoToDetail(index) {
        this.swiper.slideNext();
      },
      //点击切换tabs
      TabsItem(e) {
        this.ItemActive = e
        //点击回到顶部
        document.documentElement.scrollTop = document.body.scrollTop = 0;
        this.Scroll = false;
        setTimeout(() => {
          this.Scroll = true;
        }, 500);
        if (this.ItemActive == 0) {
          this.More[0].page = 1;
          this.NoticeList = [];
          this.GetNoticeList(1);
        } else if (this.ItemActive == 1) {

        } else {
          this.More[2].page = 1;
          this.FinancialList = [];
          this.GetProduct(this.More[2].page); //获取【理财】信息
        }

      },
      //点击进入通知详情页
      GoToNotice(childrenid, id, type, view) {
        var obj = {
          childrenid: childrenid,
          id: id,
          type: type,
          view: view
        };
        this.$store.state.Notice = obj;
        sessionStorage.setItem('Notice', JSON.stringify(obj));
        if (type == 3) {
          this.$router.push({
            path: `/RefundNotice/`+childrenid+`/`+id+`/`+type+'/'+view
          })
        } else if (type == 2) {
          this.$router.push({
            path: `/PayNoticePublic/`+childrenid+`/`+id+`/`+type+'/'+view
          });
        } else {
          this.$router.push({
            path: '/PayNotice',query:{childrenid:childrenid, id:id, type:type, view:view}
          });
        }
      },
      //点击进入理财详情页
      GoToFinancial(type, product_id, uri) {
        var obj = {
          type: type,
          product_id: product_id
        };
        sessionStorage.setItem('Financial', JSON.stringify(obj));
        if (type == 1) {
          this.$router.push({
            path: `/FinancialDetail`
          })
        } else {
          window.location.href = uri
        }
      },
      //点击进入权益详情页
      GoToRights() {
        this.$router.push({
          path: `/RightsDetail`
        })
      },
      //点击进入【我的】页面
      GoToMy() {
        this.$router.push({
          path: `/BabyPersonal`
        })
      },
      //判断滚动条是否到底部
      handleScroll() {
        var Height = this.$refs.IndexRef.scrollHeight;
        var scrollTop = this.$refs.IndexRef.scrollTop + this.$refs.IndexRef.clientHeight + 20;
        if (scrollTop >= Height && this.Scroll) {
          this.More[this.ItemActive].More = true;
          this.Scroll = false;
          this.$refs.IndexRef.scrollTop = this.$refs.IndexRef.scrollHeight;
          document.body.scrollTop = document.body.scrollHeight;
          //   判断是上拉加载哪个信息
          if (this.ItemActive == 0) {
            this.More[0].page++
            this.GetNoticeList(this.More[0].page); //获取【通知】信息
          } else if (this.ItemActive == 1) {

          } else {
            this.More[2].page++
            this.GetNoticeList(this.More[2].page); //获取【理财】信息
          }
          this.Scroll = false;
        }
      },
      // 获取个人信息
      getInfo() {
        var vm = this;
        Indicator.open({
          text: '加载中...',
        });
        this.$ApiCom.Info().then(function (res) {
          Indicator.close();
          res.data.data.userInfo.headerimg = 'http://xyb.wujiaping.cn/' + res.data.data.userInfo.headerimg;
          vm.userInfo = res.data.data.userInfo;
          sessionStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo));
          console.log(vm.userInfo)
        }, function (err) {
          //   响应超时
          Indicator.close();
          Toast({
            message: '响应超时，请重试',
            duration: 1000
          });
          setTimeout(() => {
            Indicator.close();
            vm.$router.push({
              path: `/BabyPersonal`
            })
          }, 1000);
        })
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      this.$refs.IndexRef.addEventListener('scroll', this.handleScroll);
      this.GetNoticeList(this.More[0].page); //获取【通知】信息

    },
    filters: {
      // 银行卡格式化
      capitalize: function (value, i) {
        if (i == 1 || i == 2) {
          return '****'
        } else {
          return value.substring(i * 4, (parseInt(i) + 1) * 4)
        }
      },
      //   通知类型格式化
      TypeInit(type) {
        if (type == 1) {
          return "缴费";
        } else if (type == 2) {
          return "常规";
        } else if (type == 3) {
          return "退费";
        }

      }
    },
    beforeRouteLeave(to, from, next) {
        console.log(to.path);
        if (to.path == `/FinancialDetail`) {
            from.meta.keepAlive = true;
        }
        next();
    }
  }

</script>

<style lang="scss" scoped="scoped">
  @import url("css/Index.css");

</style>
